<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>潮人分享-欢聚网</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" th:href="@{/css/mui.min.css}" />
		<link rel="stylesheet" th:href="@{/css/common.css}" />
		<link rel="stylesheet" th:href="@{/css/icons-extra.css}" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">潮人分享</h1>
			<a href="/topic/publish" class="mui-icon mui-icon-compose mui-pull-right"></a>
		</header>
		<div class="mui-content">
			<div id="refreshContainer" class="mui-content mui-scroll-wrapper" style="margin-top:50px;">
				<div class="mui-scroll">
					<!--数据列表-->
					<ul class="mui-table-view" id="list">
						<!--- 
						<li class="mui-table-view-cell mui-media">
							<a href="">
								<img class="mui-media-object mui-pull-left" src="/img/card-1.jpg">
								<div class="mui-media-body">
									标题标题
									<p class='mui-ellipsis'>详细详细详细</p>
								</div>
							</a>
						</li>
						--->
					</ul>
				</div>
			</div>

		</div>
		<div th:include="common/footer :: nav"></div>
		<script src="/js/mui.min.js"></script>
		<script src="/js/jquery.min.js"></script>
		<script src="/js/common.js"></script>
		<script src="/js/mui.class.scroll.pullrefresh.js"></script>
		<script src="/js/mui.pullrefresh.js"></script>
		<script>
			var list = $("#list");
			var page = 1;
			mui.init({
				pullRefresh: {
					container: "#refreshContainer",
					up: {
						height: 50,
						auto: true,
						contentrefresh: "正在加载...",
						contentnomore: '没有更多数据了',
						callback: function() {
							var self = this;
							getList(page, self);
							page++;
							console.log("88");

						}
					}
				}
			});

			function getList(page, obj) {
				$.ajax({
					url: "/topic/list/" + page,
					data: $("form").serialize(),
					type: 'get',
					async: false,
					dataType: 'json',
					beforeSend: function() {

					},
					success: function(response) {
						if(response.code == 200) {

							for(var i = 0; i < response.result.list.length; i++) {
								//console.log(response.result.list[i].topic_title);
								var date = new Date(response.result.list[i].topic_time);
								var html = '<li class="mui-table-view-cell mui-media" >' +
									'<a   href="/topic/detail?tid=' + response.result.list[i].tid + '">' +
									'<img class="mui-media-object mui-pull-left" src="/img/card-1.jpg">' +
									'<div class="mui-media-body">' + response.result.list[i].topic_title +
									'<p class="mui-ellipsis">' + response.result.list[i].user.name + "   " + date.format('yyyy-MM-dd') + '</p>' +
									'</div></a></li>';
								list.append(html);

							}
							aTolink();
							if(response.result.list.length < 10) {
								obj.endPullupToRefresh(true);
							} else {
								obj.endPullupToRefresh(false);
							}
						}
					}
				});
			}
		</script>
	</body>

</html>